<template>
  <div class="time-display">
    <span class="clock">{{ time }}</span>
    <span class="date">{{ date }}</span>
    <span class="weekday">{{ weekday }}</span>
  </div>
</template>

<script>
export default {
  name: 'GlobalTime',
  data() {
    return {
      time: '',
      date: '',
      weekday: '',
      timer: null,
    };
  },
  mounted() {
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    updateTime() {
      const now = new Date();
      const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
      const format = (n) => (n < 10 ? '0' + n : n);

      const hours = format(now.getHours());
      const minutes = format(now.getMinutes());
      const seconds = format(now.getSeconds());
      const year = now.getFullYear();
      const month = format(now.getMonth() + 1);
      const day = format(now.getDate());
      const weekDay = weekDays[now.getDay()];

      this.time = `${hours}:${minutes}:${seconds}`;
      this.date = `${year}.${month}.${day}`;
      this.weekday = `星期${weekDay}`;
    }
  }
};
</script>

<style scoped>
.time-display {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #BAF0FA;
  display: flex;
  gap: 10px; /* 控制每段之间的间距 */
  font-weight: 400;
}

.clock {
  display: block;
  font-size: 24px;
  width: 100px;
  text-align: right;
}

.date {
}

.weekday {
}
</style>
